<template>
	<view>
		<view class="wrap">
			<view class="nav">
				<view class="tab01"  @tap="swichNav(0)"  :class="currentTab==0 ? 'selected01' : '' ">快递</view>
				<view class="tab01"  @tap="swichNav(1)"  :class="currentTab==1 ? 'selected01' : '' ">自提</view>
			</view>
			<view class="address_box" data-url="/pages/address/address?f=1" @click="gotopage" v-show="currentTab===0||currentTab===0?true:false">
					<view class="icon iconfont">&#xe64c;</view>
				<view class="personal">
					<view class="name_box">
						<view class="name" v-if="name != ''">{{name}}</view>	
						<view class="name" v-if="name == ''">请选择地址</view>
						<view class="phone" v-if="name != ''">{{phone}}</view>
					</view>
					<view class="address" v-if="name != ''">{{address}}</view>
					<view class="address" v-if="name == ''">暂无选择收货地址</view>
				  <view class="arrow iconfont">&#xe775;</view>
				</view>
			</view>
			<view class="address_box" data-url="/pages/address/address?f=1" @click="gotopage" v-show="currentTab===1||currentTab===1?true:false">
		<!-- 		<view class="dizhi">自取地址：建兴镇洪江路金山工业集中区铺上片平潭工业园1号楼</view>	 -->
			</view>
		</view>
		<view class="content">
			<view class="order_box">
		<!-- 		<view class="number">订单编号：2019101700140262</view> -->
				<!-- <view class="state">订单已完成</view> -->
			</view>
			<view class="goods_box" v-for="(item, index) in list" :key="index">
				<image class="goods_img" :src="item.image" mode="scaleToFill"></image>
				<view class="title">{{item.name}}</view>
				<view class="num">x{{item.quantity}}</view>
		
			<view class="money" v-if='e.pay==1'>￥{{ item.price }}</view>
			<!-- 	<view class="money" v-if='e.pay==2'>￥{{ item.price }}+{{ item.znj}}%助农劵</view>
					<view class="money" v-if='e.pay==3'>积分：{{ item.znb}}</view> -->
				<view class="time">规格：{{ item.sku_dkr || '默认' }}</view>
			</view>
		</view>
		<!-- <view class="remarks">
			<view class="bei">代理地区(例:福建省福州市仓山区/县)</view>
			<view class="zhu"><textarea value="" placeholder="请规范输入地区"/></view>
		</view> -->
		<view class="remarks">
			<view class="bei">备注</view>
			<view class="zhu"><textarea value="" placeholder="请输入备注信息" v-model="bz"/></view>
		</view>
<!-- 
		<view class="give_box">
			<view class="x_title">订单信息</view>
			<view class="text_list">
				<view class="text">收货地址</view>
				<view class="text02">福建省福州市晋安区福光路162号</view>
			</view>
			<view class="text_list">
				<view class="text">姓名</view>
				<view class="text02">这里是名字</view>
			</view>
			<view class="text_list">
				<view class="text">电话</view>
				<view class="text02">158802633665</view>
			</view>
			<view class="text_list">
				<view class="text">配送方式</view>
				<view class="text02">中通快递</view>
			</view>
			<view class="text_list">
				<view class="text">运费</view>
				<view class="text02 moneycolor">¥10.00</view>
			</view>
			
			<view class="text_list" @tap="autoTick">
				<view class="text" style="line-height: 30px;">用460积分抵现</view>
				<view class="tips">当前积分 3600</view>
				<view class="money">¥-2.00</view>
				<view class="tick iconfont" :class="tick ? 'tickcolor' : ''">&#xe6aa;</view>
				
			</view>
			<view class="text_list" style="border-bottom:1px solid #f5f5f5">
				<view class="text">备注</view>
				<view class="text02">无</view>
				<input class="text02" type="text" value="" placeholder="选填，请先和商家协商一致" />
			</view>
			<view class="contact" @tap="openPhone">
				<view class="icon iconfont icondadianhua"></view>
				<view class="text">联系商家</view>
			</view>
		</view> -->
		

		<view class="footer">
		<!-- <view class="money_box" v-if='dd.us_lv>1'>
			<view class="total_box">
				<view class="text">合计：</view>
				<view class="money" >￥{{ dd.price_zk }}</view>
			
			</view>
		</view> -->
			<view class="money_box" >
				<view class="total_box">
					<view class="text">实付：</view>
					
					<view class="money" v-if='e.pay==1'>￥{{ e.dis }}<block v-if='currentTab==0 && e.yun>0'>+运费:{{e.yun}}</block></view>
						<!-- <view class="money" v-if='e.pay==2'>￥{{ e.dis }}+{{ e.pay_znj }}助农劵</view>
							<view class="money" v-if='e.pay==3'>积分：{{ e.pay_znb}}</view> -->
				</view>
			</view>
			<view class="menu" data-url="/pages/car/payment" @tap="go()">提交订单</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			totalmoney:'100',
			checked:false,
			tick:false,
			name:'',
			phone:'',
			address:"",
			pupu_show:false,
			list:"",
			con:'',
			conid:'',
			dd:'',
			bz:'',
		    type:0,
			 e:[],
			currentTab:0,
		};
	},
	
	onShow(){
		let me = this;
		
		if(uni.getStorageSync('a'))
		{
			me.name=uni.getStorageSync('a')
			me.phone=uni.getStorageSync('b')
			me.address=uni.getStorageSync('c')
		}			
		
		me.Net._get('addOrder',{},(res)=>{
			if(res.code ==1){
				me.list=res.data.list
				me.totalmoney=res.data.dis
				me.dd=res.data
					me.e=res.data
				if(res.data.add && !uni.getStorageSync('a'))
				{
					me.name=res.data.add.consigner
					me.phone=res.data.add.phone
					me.address=res.data.add.city+res.data.add.detail
				}
				if(res.data.con)
				{
					me.con=res.data.con
				}
				console.log(res.data)
			}
		});
	},
	methods: {
		go() {
			var that = this;
				if(that.currentTab==0)
				{
					if(!that.name || !that.phone || !that.address)
					{
						this.Msg.Fail('请填写收货地址');
						return
					}
				}
			
			that.Net._get('addOrderd',{sz:that.currentTab,bz:that.bz,name:that.name,phone:that.phone,address:that.address,conid:that.conid},(res)=>{
				console.log(res.data.success)
				if(res.code==1){
					uni.setStorageSync('a','')
					uni.redirectTo({
						url: '/pages/car/payment?id='+res.data[0]+'&pay='+res.data[1],
					});
				
				}
				else
				{
					that.Msg.Fail(res.data.msg,(res)=>{
					// uni.navigateBack({url:'/pages/addresslist/addresslist',type:2})
					})	
				}
			});   
		},
		setNavMenu(e) {
			let index = e.currentTarget.dataset.index;
			this.select = index;
		},
		openPhone() {
			uni.showModal({
				title: '客服热线',
				content: '15880123228',
				success: function(res) {
					if (res.confirm) {
						//console.log('用户点击确定');
						uni.makePhoneCall({
							phoneNumber: '15880123228' //仅为示例
						});
					} else if (res.cancel) {
						//console.log('用户点击取消');
					}
				}
			});
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		},
		swichNav(id) {
			this.currentTab = id;
		},
		setRadio(){
			this.checked = !this.checked;
		},
		// autoTick(){
		// 	this.tick = !this.tick;
		// }
	}
};
</script>
<style>
	page{
		padding-bottom: 100px;
		background-color: #f8f8f8;
	}
.nav{ width: 100%; margin: auto; display: flex;height: 10vw; line-height: 10vw; }
.tab01{ width: 50%; font-size: 4vw; color: #999999; text-align: center;}
.selected01{
	font-size: 4vw !important;
	color: #333333 !important;
	background-color: #e1fafe !important;
	color: #333 !important;
	font-weight: bold !important;
	width: 50%;
	border-radius: 2vw 2vw 0vw 0vw;
}
.dizhi{
	font-size: 3.5vw;
	padding: 0vw 5vw;
	line-height: 6vw;
}
.content {
	width: 94%;
	margin: 0 auto;
	background: #fff;
	border-radius: 10px;
	margin-top: 3%;
	padding-bottom: 10px;
}

.content .order_box {
	width: 100%;
	height: 40px;
	position: relative;
}

.content .order_box .number {
	font-size: 12px;
	color: #333;
	line-height: 40px;
	position: absolute;
	left: 10px;
}

.content .order_box .state {
	font-size: 12px;
	color: #176bff;
	line-height: 40px;
	position: absolute;
	right: 10px;
}

.content .goods_box {
	width: 100%;
	height: 90px;
	position: relative;
	margin-bottom: 10px;
}

.content .goods_box:last-child{
	margin-bottom: 0;
}

.content .goods_box .goods_img {
	width: 90px;
	height: 90px;
	border-radius: 6px;
	position: absolute;
	left: 10px;
}

.content .goods_box .title {
	font-size: 14px;
	color: #333;
	width: calc(100% - 160px);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	position: absolute;
	left: 110px;
}

.content .goods_box .num {
	font-size: 12px;
	color: #666;
	width: 50px;
	text-align: right;
	position: absolute;
	right: 10px;
}

.content .goods_box .money {
	font-size: 14px;
	color: #ff3543;
	position: absolute;
	left: 110px;
	top: 46px;
}

.content .goods_box .time {
	font-size: 12px;
	color: #959595;
	position: absolute;
	left: 110px;
	bottom: 0px;
}

.give_box {
	width: 94%;
	margin: 0 auto;
	background: #fff;
	border-radius: 10px;
	margin-top: 3%;
	text-align: center;
}

.give_box .x_title {
	width: 100%;
	height: 40px;
	font-size: 14px;
	color: #333;
	line-height: 40px;
	text-indent: 10px;
	text-align: left;
}

.give_box .text_list {
	width: 100%;
	height: 40px;
	display: flex;
	position: relative;
}

.give_box .text_list .tick{	
	position: absolute;
	right: 10px;
	top: 12px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #999;
	font-size: 14px;
	line-height: 19px;
	text-align: center;	
	color: transparent;
	box-sizing: border-box;
	color: #fff;
}

.give_box .text_list .money{	
	position: absolute;
	right: 38px;
	font-size: 12px;
	line-height: 40px;	
	color: #FD4916;
}




.give_box .text_list .text {
	width: 40%;
	line-height: 40px;
	height: 40px;
	text-indent: 10px;
	font-size: 12px;
	color: #333;
	text-align: left;
}

.give_box .text_list .tips {
	font-size: 10px;
	color: #999;
	position: absolute;
	left: 10px;
	bottom: 5px;
}

.give_box .text_list .arrow{
	font-size: 16px;
	color: #999;
	line-height: 40px;
	position: absolute;
	right: 10px;
}

.give_box .text_list .text02 {
	width: calc(100% - 40% - 10px);
	line-height: 40px;
	height: 40px;
	text-indent: 10px;
	font-size: 12px;
	color: #333;
	text-align: right;
}

.give_box .text_list .text03 {
	width: 50%;
	line-height: 40px;
	height: 40px;
	font-size: 12px;
	color: #333;
	text-align: right;
	position: absolute;
	right: 30px;
}

.give_box .contact {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
}

.give_box .contact .icon {
	font-size: 18px;
	color: #333;
	margin-right: 5px;
	line-height: 50px;
	font-weight: bold;
}

.give_box .contact .text {
	font-size: 14px;
	color: #333;
	line-height: 50px;
}



.give_box image {
	width: 70%;
}

.moneycolor {
	color: #ff3644 !important;
}

.footer {
	width: 100%;
	height: 60px;
	background: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	border-top: 1px solid #f5f5f5;
	align-items: auto;
}

.footer .menu {
	width: 30vw;
	height: 45px;
	line-height: 45px;
	text-align: center;
	border-radius: 24vw;
	background-color: #f00000;
	font-size: 14px;
	color: #fff;
	margin-top: 5px;
	margin-right: 4%;
	
}

.footer .money_box {
	flex: 1;
	height: 60px;
	position: relative;
	display: flex;
	justify-content: flex-end;
}

.footer .money_box .tick_box {
	width: 100px;
	height: 60px;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
}

.footer .money_box .tick_box .tick {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #999;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	/* position: absolute;
	  left: calc(50% - 9px);
	  top: calc(50% - 9px); */
	color: #fff;
	box-sizing: border-box;
	margin-top: 21px;
	margin-right: 10px;
}

.footer .money_box .tick_box .text {
	font-size: 14px;
	line-height: 60px;
	text-align: center;
	color: #666;
}

.footer .money_box .total_box {
	width: calc(100% - 50px);
	height: 60px;
	position: absolute;
	right: 10px;
	top: 0;
	display: flex;
	justify-content: flex-end;
}

.footer .money_box .total_box .text {
	width: 50px;
	font-size: 14px;
	line-height: 60px;
	text-align: right;
	color: #666;
}

.footer .money_box .total_box .money {
	width: calc(100% - 50px);
	font-size: 14px;
	line-height: 60px;
	text-align: center;
	color: #FE4816;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.tickcolor { 
	  background-color: black !important;
	  border: none !important;
	  
	 
	}
.wrap{
	width: 94%;
	margin: 3vw auto 0vw;
	border-radius: 6px;
	background-color: #fff;
}	
	
	.address_box {
		padding: 5px 0 12px 0;
		display: flex;
		margin-top: 10px;
		border-radius: 2vw;
	}
	
	.address_box .icon {
		width: 50px;
		height: 50px;
		text-align: center;
		font-size: 22px;
		color: black;
		line-height: 50px;
	}
	
	.address_box .personal {
		width: calc(100% - 60px);
	}
	
	.address_box .personal .name_box {
		display: flex;
		margin-top: 5px;
	}
	
	.address_box .personal .name_box .name {
		font-size: 14px;
		color: #333;
		margin-right: 5px;
		line-height: 20px;
	}
	
	.address_box .personal .name_box .phone {
		font-size: 12px;
		color: #666;
		line-height: 20px;
	}
	
	.address_box .personal .address {
		font-size: 12px;
		color: #333;
		width: 100%;
		margin-top: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.address_box .personal .arrow {
		font-size: 14px;
		color: #999;
		position: absolute;
		right: 16px;
		top: 25px;
	}
.remarks{
	width: 94%;
	margin: 3vw auto 0vw;
	border-radius: 6px;
	background-color: #fff;
	padding-bottom: 3vw;
}
.remarks .bei{
	font-size: 4vw;
	color: #333;
	font-weight: bold;
	padding: 3vw;
}
.remarks textarea{
	width: 93%;
	height: 150rpx;
	margin: auto;
	border: 1px solid #edeaea;
	line-height: 10vw;
	border-radius: 1vw;
	padding:0vw 2vw ;
	font-size: 3.5vw;
}
</style>

